<!--
  * 首页 用户头部信息
  *
-->
<template>
  <div class="user-header">
    <div class="left-content">
      <span class="title">{{ welcomeSentence }}</span>
      <span style="color: #666; flex: 1; width: 240px">{{ address }} </span>
    </div>
    <div class="middle-content">
      <div v-for="item in list" :key="item.filed" class="item" @click="toDetail(item.path)">
        <h3 style="font-size: 14px; font-weight: normal"> {{ item.name }}</h3>
        <p style="font-size: 18px">{{ taskInfo?.data[item.filed] }}</p>
      </div>
    </div>
    <div class="weather">
      <iframe width="100%" style="pointer-events: none" scrolling="no" height="50" frameborder="0" allowtransparency="true" :src="`//i.tianqi.com/index.php?c=code&id=12&icon=1&num=3&site=12&py=${shortName}`"></iframe>
    </div>
  </div>
</template>
<script setup lang="ts">
import _ from 'lodash'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user-store'
import { homeApi } from '@/api/system/home-api'

const { getUserInfo, getCompanyInfo } = useUserStore()
const router = useRouter()
const userInfo = getUserInfo
const taskInfo = ref()
const list = ref([
  { name: '门店数量', filed: 'store_count', path: '/data/networks' },
  { name: '业务员数量', filed: 'salesman_count', path: '/data/salesman' },
  { name: '商品数量', filed: 'goods_count', path: '/goods/list' },
  { name: '线路数量', filed: 'visit_line_count', path: '/data/line' },
  { name: '陈列协议数量', filed: 'display_agreement_count', path: '/marketing/display/agreement' }
])
const address = computed(() => getCompanyInfo.address)

function chineseToPinyin(chineseArray) {
  // 定义一个汉字到拼音的映射表（这里只包含示例中的汉字）
  const pinyinMap = {
    邓: 'deng',
    州: 'zhou',
    唐: 'tang',
    河: 'he',
    内: 'nei',
    乡: 'xiang'
  }

  // 定义一个数组来存储转换后的拼音结果
  const pinyinArray: string[] = []

  // 遍历输入的中文数组
  for (const chinese of chineseArray) {
    let pinyin = ''
    // 遍历每个汉字
    for (const char of chinese) {
      // 从映射表中获取对应的拼音
      const charPinyin = pinyinMap[char]
      if (charPinyin) {
        pinyin += charPinyin
      } else {
        // 如果映射表中没有该汉字，保留原字符
        pinyin += char
      }
    }
    // 将转换后的拼音添加到结果数组中
    pinyinArray.push(pinyin)
  }

  return pinyinArray
}
const shortName = computed(() => chineseToPinyin(getCompanyInfo.short_name.split('')).join(''))

async function fetchTaskInfo() {
  try {
    taskInfo.value = await homeApi.dealerHomeIndex()
  } catch (error) {
    console.error('获取失败:', error)
  }
}
fetchTaskInfo()
// 欢迎语
const welcomeSentence = computed(() => {
  let sentence = ''
  let now = new Date().getHours()
  if (now > 0 && now <= 6) {
    sentence = '午夜好，'
  } else if (now > 6 && now <= 11) {
    sentence = '早上好，'
  } else if (now > 11 && now <= 14) {
    sentence = '中午好，'
  } else if (now > 14 && now <= 18) {
    sentence = '下午好，'
  } else {
    sentence = '晚上好，'
  }
  return sentence + userInfo.username
})

// 跳转
function toDetail(noticeId) {
  router.push({
    path: noticeId
  })
}
</script>
<style scoped lang="less">
.user-header {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 20px 24px;
  color: rgba(0, 0, 0, 0.88);

  .left-content {
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    gap: 12px;

    .title {
      margin-right: 12px;
      margin-bottom: 0;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      font-size: 20px;
      line-height: 32px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .middle-content {
    flex: auto;
    display: inline-flex;

    h3 {
      color: rgba(0, 0, 0, 0.75);
    }

    p {
      margin: 0 10px;
      color: rgba(46, 87, 223, 0.863);
      font-weight: bold;
      font-size: 14px;
      margin: 0;
    }

    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: center;
      box-sizing: border-box;
      cursor: pointer;
      margin: 0 5px;
      width: calc(100% / 6);
    }
    .item::after {
      content: '';
      position: absolute;
      left: 80%;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 75%;
      background-color: #eee;
    }
    .item:last-of-type::after {
      width: 0;
    }
  }

  .weather {
    width: 380px;
  }
}
</style>
